<template>
	<view class="">
		<view class="flex-alignItems-center padding-20 bg-fff">
			<view class="project-view flex-between">
				<view class="fontSize-14 color-000">请选择监测项目</view>
				<u-icon name="arrow-down" color="#999999" size="16"></u-icon>
			</view>
			<view class="flex-alignItems-center">
				<view class="margin-right20">
					<image class="img-38" v-if="false" src="../../static/image/check.png" mode=""></image>
					<image class="img-38" v-else src="../../static/image/checked.png" mode=""></image>
				</view>
				<view class="fontSize-14 color-000">是否预警</view>
			</view>
		</view>

		<!-- 折叠层 -->
		<view class="padding-20">
			<view class="bg-fff border-radius10 padding-30">
				<view class="flex-between" @click="handleCollcetShow">
					<view class="fontSize-14 color-000">嘉兴高速管理养护项目</view>
					<view class="">
						<u-icon name="arrow-up" v-if="isCollectShow" color="#999999" size="16"></u-icon>
						<u-icon name="arrow-down" v-else color="#999999" size="16"></u-icon>
					</view>
				</view>
				<template v-if="isCollectShow">
					<uni-collapse accordion>
						<uni-collapse-item title="监控视频">
							<template v-slot:title>
								<view class="flex-between collapse-title">
									<view class="fontSize-14 color-000">监控视频</view>
									<view class="monitor-icon-view margin-right10"></view>
								</view>
							</template>
							<view class="collapse-content margin-bottom10" @click="$tools.navigateTo('/pages/monitor/monitor-info')">
								<view class="flex-between margin-bottom10">
									<view class="flex-alignItems-center">
										<view class="collapse-iconText"></view>
										<view class="fontSize-14 color-000">HZ-GS-G2504-JC002-SB3</view>
									</view>
									<view class="collapse-icon margin-left20 flex-center">正常</view>
								</view>
								<view class="fontSize-12 color-999">2024-11-11 10:00:00</view>
							</view>
							<view class="collapse-content margin-bottom10">
								<view class="flex-between margin-bottom10">
									<view class="flex-alignItems-center">
										<view class="collapse-iconText1"></view>
										<view class="fontSize-14 color-000">HZ-GS-G2504-JC002-SB3</view>
									</view>
									<view class="collapse-icon1 margin-left20 flex-center">正常</view>
								</view>
								<view class="fontSize-12 color-999">2024-11-11 10:00:00</view>
							</view>
							<view class="collapse-content margin-bottom10">
								<view class="flex-between margin-bottom10">
									<view class="flex-alignItems-center">
										<view class="collapse-iconText2"></view>
										<view class="fontSize-14 color-000">HZ-GS-G2504-JC002-SB3</view>
									</view>
									<view class="collapse-icon2 margin-left20 flex-center">正常</view>
								</view>
								<view class="fontSize-12 color-999">2024-11-11 10:00:00</view>
							</view>
						</uni-collapse-item>
					</uni-collapse>
					<uni-collapse accordion>
						<uni-collapse-item title="深部位移">
							<template v-slot:title>
								<view class="flex-between collapse-title">
									<view class="fontSize-14 color-000">深部位移</view>
									<view class="monitor-icon-view margin-right10"></view>
								</view>
							</template>
							<view class="collapse-content margin-bottom10">
								<view class="flex-between margin-bottom10">
									<view class="flex-alignItems-center">
										<view class="collapse-iconText"></view>
										<view class="fontSize-14 color-000">HZ-GS-G2504-JC002-SB3</view>
									</view>
									<view class="collapse-icon margin-left20 flex-center">正常</view>
								</view>
								<view class="fontSize-12 color-999">2024-11-11 10:00:00</view>
							</view>
						</uni-collapse-item>
					</uni-collapse>
					<uni-collapse accordion>
						<uni-collapse-item title="地表位移">
							<template v-slot:title>
								<view class="flex-between collapse-title">
									<view class="fontSize-14 color-000">地表位移</view>
									<view class="monitor-icon-view margin-right10"></view>
								</view>
							</template>
							<view class="collapse-content margin-bottom10">
								<view class="flex-between margin-bottom10">
									<view class="flex-alignItems-center">
										<view class="collapse-iconText"></view>
										<view class="fontSize-14 color-000">HZ-GS-G2504-JC002-SB3</view>
									</view>
									<view class="collapse-icon margin-left20 flex-center">正常</view>
								</view>
								<view class="fontSize-12 color-999">2024-11-11 10:00:00</view>
							</view>
						</uni-collapse-item>
					</uni-collapse>
					<uni-collapse accordion>
						<uni-collapse-item title="降雨量">
							<template v-slot:title>
								<view class="flex-between collapse-title">
									<view class="fontSize-14 color-000">降雨量</view>
									<view class="monitor-icon-view margin-right10"></view>
								</view>
							</template>
							<view class="collapse-content margin-bottom10">
								<view class="flex-between margin-bottom10">
									<view class="flex-alignItems-center">
										<view class="collapse-iconText"></view>
										<view class="fontSize-14 color-000">HZ-GS-G2504-JC002-SB3</view>
									</view>
									<view class="collapse-icon margin-left20 flex-center">正常</view>
								</view>
								<view class="fontSize-12 color-999">2024-11-11 10:00:00</view>
							</view>
						</uni-collapse-item>
					</uni-collapse>
					<uni-collapse accordion>
						<uni-collapse-item title="温度湿度">
							<template v-slot:title>
								<view class="flex-between collapse-title">
									<view class="fontSize-14 color-000">温度湿度</view>
									<view class="monitor-icon-view margin-right10"></view>
								</view>
							</template>
							<view class="collapse-content margin-bottom10">
								<view class="flex-between margin-bottom10">
									<view class="flex-alignItems-center">
										<view class="collapse-iconText"></view>
										<view class="fontSize-14 color-000">HZ-GS-G2504-JC002-SB3</view>
									</view>
									<view class="collapse-icon margin-left20 flex-center">正常</view>
								</view>
								<view class="fontSize-12 color-999">2024-11-11 10:00:00</view>
							</view>
						</uni-collapse-item>
					</uni-collapse>
					<uni-collapse accordion>
						<uni-collapse-item title="沉降位移">
							<template v-slot:title>
								<view class="flex-between collapse-title">
									<view class="fontSize-14 color-000">沉降位移</view>
									<view class="monitor-icon-view margin-right10"></view>
								</view>
							</template>
							<view class="collapse-content margin-bottom10">
								<view class="flex-between margin-bottom10">
									<view class="flex-alignItems-center">
										<view class="collapse-iconText"></view>
										<view class="fontSize-14 color-000">HZ-GS-G2504-JC002-SB3</view>
									</view>
									<view class="collapse-icon margin-left20 flex-center">正常</view>
								</view>
								<view class="fontSize-12 color-999">2024-11-11 10:00:00</view>
							</view>
						</uni-collapse-item>
					</uni-collapse>
					<uni-collapse accordion>
						<uni-collapse-item title="拉线位移">
							<template v-slot:title>
								<view class="flex-between collapse-title">
									<view class="fontSize-14 color-000">拉线位移</view>
									<view class="monitor-icon-view margin-right10"></view>
								</view>
							</template>
							<view class="collapse-content margin-bottom10">
								<view class="flex-between margin-bottom10">
									<view class="flex-alignItems-center">
										<view class="collapse-iconText"></view>
										<view class="fontSize-14 color-000">HZ-GS-G2504-JC002-SB3</view>
									</view>
									<view class="collapse-icon margin-left20 flex-center">正常</view>
								</view>
								<view class="fontSize-12 color-999">2024-11-11 10:00:00</view>
							</view>
						</uni-collapse-item>
					</uni-collapse>
					<uni-collapse accordion>
						<uni-collapse-item title="水平位移">
							<template v-slot:title>
								<view class="flex-between collapse-title">
									<view class="fontSize-14 color-000">水平位移</view>
									<view class="monitor-icon-view margin-right10"></view>
								</view>
							</template>
							<view class="collapse-content margin-bottom10">
								<view class="flex-between margin-bottom10">
									<view class="flex-alignItems-center">
										<view class="collapse-iconText"></view>
										<view class="fontSize-14 color-000">HZ-GS-G2504-JC002-SB3</view>
									</view>
									<view class="collapse-icon margin-left20 flex-center">正常</view>
								</view>
								<view class="fontSize-12 color-999">2024-11-11 10:00:00</view>
							</view>
						</uni-collapse-item>
					</uni-collapse>
					<uni-collapse accordion>
						<uni-collapse-item title="多维倾角仪">
							<template v-slot:title>
								<view class="flex-between collapse-title">
									<view class="fontSize-14 color-000">多维倾角仪</view>
									<view class="monitor-icon-view margin-right10"></view>
								</view>
							</template>
							<view class="collapse-content margin-bottom10">
								<view class="flex-between margin-bottom10">
									<view class="flex-alignItems-center">
										<view class="collapse-iconText"></view>
										<view class="fontSize-14 color-000">HZ-GS-G2504-JC002-SB3</view>
									</view>
									<view class="collapse-icon margin-left20 flex-center">正常</view>
								</view>
								<view class="fontSize-12 color-999">2024-11-11 10:00:00</view>
							</view>
						</uni-collapse-item>
					</uni-collapse>
				</template>
			</view>
		</view>
		
		<!-- 刷新 -->
		<view class="reload-view flex-center">
			<u-icon name="reload" color="#333333" size="28"></u-icon>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isCollectShow: false
			}
		},
		methods: {
			handleCollcetShow() {
				this.isCollectShow = !this.isCollectShow
			}
		}
	}
</script>

<style lang="scss" scoped>
	.reload-view{
		position: fixed;
		bottom: 300rpx;
		right: 30rpx;
		width: 100rpx;
		height: 100rpx;
		background-color: #FFFFFF;
		border-radius: 50%;
	}
	// 异常状态
	.collapse-iconText2{
		width: 6rpx;
		height: 30rpx;
		background: #F59A0D;
		border-radius: 5rpx;
		margin-right: 10rpx;
	}
	.collapse-iconText1{
		width: 6rpx;
		height: 30rpx;
		background: #EF3C34;
		border-radius: 5rpx;
		margin-right: 10rpx;
	}
	.collapse-iconText{
		width: 6rpx;
		height: 30rpx;
		background: #39C477;
		border-radius: 5rpx;
		margin-right: 10rpx;
	}
	.collapse-icon2{
		width: 80rpx;
		height: 40rpx;
		background: #F59A0D;
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;
		border-radius: 5rpx 5rpx 5rpx 5rpx;
	}
	.collapse-icon1{
		width: 80rpx;
		height: 40rpx;
		background: #EF3C34;
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;
		border-radius: 5rpx 5rpx 5rpx 5rpx;
	}
	.collapse-icon{
		width: 80rpx;
		height: 40rpx;
		background: #39C477;
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;
		border-radius: 5rpx 5rpx 5rpx 5rpx;
	}
	.collapse-title {
		padding: 30rpx 0;
	}
	
	.collapse-content {
		padding: 15rpx;
		background-color: #F7F7F7;
		border-radius: 10rpx;
	}

	.project-view {
		flex: 1;
		border: 1px solid #DBDBDB;
		background-color: #F7F7F7;
		border-radius: 10rpx;
		padding: 20rpx;
		margin-right: 20rpx;
	}
</style>